<template>
  <div class="cash-box">
    <div class="tips">提现到微信钱包，金额为</div>
    <div class="amount-money van-hairline--bottom">
      <span>￥</span>
      <input type="number" v-model.trim="amount" />
    </div>
    <div class="total-money">
      <span class="total">余额￥{{total}}</span>
      <span class="action" @click="cashAll">全部提现</span>
      <span class="text">预计1-7个工作日到账</span>
    </div>
    <div class="action-btn" :class="{'disabled': !disabledBtn}" @click="cashOut">确认提现</div>
  </div>
</template>

<script>
import wechatService from 'SERVICE/wechatService'
export default {
  data() {
    return {
      amount: '',
      total: '0',
      timer: null
    }
  },
  created() {
    this.total = (this.$route.query.withdrawPrice / 100).toFixed(2) || 0
  },
  computed: {
    disabledBtn() {
      return this.amount && +this.total >= +this.amount
    }
  },
  watch: {
    amount(val) {
      if (+val > +this.total) {
        this.amount = this.total
      }
      // clearTimeout(this.timer) //防抖
      // this.timer = setTimeout(() => {
      //   let reg = /^(0|[1-9]\d*)(\.\d{1,2})?/
      //   let price = val.match(reg)
      //   this.amount = price ? price[0] : ''
      // }, 500)
    }
  },
  methods: {
    cashAll() {
      this.amount = this.total
    },
    cashOut() {
      let reg = /^(0|[1-9]\d*)(\.\d{1,2})?/g
      if (!reg.test(this.amount)) {
        return this.$toast('提现金额为不合法')
      }
      if (+this.amount > +this.total) {
        return this.$toast('提现金额不能大于余额')
      }
      if (+this.amount < 1) {
        return this.$toast('提现金额不能小于1元')
      }
      // 提现
      this.cashFn()
    },
    cashFn() {
      wechatService
        .agentWithdraw({
          withdrawPrice: this.amount * 100
        })
        .then(res => {
          this.$router.push(`/money/cashresult?withdrawPrice=${+this.amount}&walletType=${res.walletType}`)
        })
        .catch()
    }
  }
}
</script>

<style lang="less" scoped>
.cash-box {
  font-size: 14px;
  color: #40516f;
  padding: 34px 16px;
  .tips {
    height: 20px;
    font-weight: 400;
    color: rgba(64, 81, 111, 1);
    line-height: 20px;
  }
  .amount-money {
    display: flex;
    align-items: center;
    color: #13284d;
    margin-top: 8px;
    font-weight: 600;
    span {
      font-size: 44px;
      color: rgba(19, 40, 77, 1);
    }
    input {
      flex: 1;
      width: 200px;
      font-size: 44px;
      border: none;
      padding-left: 0;
    }
  }
  .total-money {
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-weight: 400;
    .action {
      margin-left: 18px;
      color: #007ae6;
    }
    .text {
      flex: 1;
      text-align: right;
      color: #9ca5b5;
    }
  }
  .action-btn {
    margin-top: 70px;
    height: 44px;
    background: rgba(0, 122, 230, 1);
    border-radius: 6px;
    background-color: #007ae6;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 44px;
    &.disabled {
      opacity: 0.6;
    }
  }
}
</style>